<template>
  <d2-container>
    <template slot="header">
        <template>
            <el-form
                :inline="true"
                size="mini"
                style="margin-bottom: -18px;">
                <el-form-item>
                <el-button
                    type="primary"
                    @click="">
                    <d2-icon name="plus"/>
                    新增
                </el-button>
                </el-form-item>

                <el-form-item>
                <el-button
                    type="danger"
                    @click="">
                    <d2-icon name="trash-o"/>
                    刪除
                </el-button>
                </el-form-item>

                <el-form-item>
                <el-button
                    @click="">
                    <d2-icon name="bullhorn"/>
                    发布
                </el-button>
                </el-form-item>

                <el-form-item>
                <el-button
                    type="info"
                    @click="">
                    <d2-icon name="share"/>
                    推送
                </el-button>
                </el-form-item>
            </el-form>
        </template>
    </template>
    
    <template>
        <el-table 
        :data="tableData" 
        style="width: 100%">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="标题" width="450" prop="title"/>
            <!-- <el-table-column label="封面图" width="150" prop="coverImage"/> -->
            <el-table-column label="评论" width="120" align="center">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.comment == 1"
                            active-color="#67C23A"
                            inactive-color="#F56C6C"
                            @change="handleStatusChange($event,scope.row)">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="推荐" width="120" align="center">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.recommended == 1"
                            active-color="#67C23A"
                            inactive-color="#F56C6C"
                            @change="handleStatusChange($event,scope.row)">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="置顶" width="120" align="center">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.top == 1"
                            active-color="#67C23A"
                            inactive-color="#F56C6C"
                            @change="handleStatusChange($event,scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="浏览" width="100" prop="lookCount"/>
            <el-table-column label="评论" width="100" prop="commentCount"/>
            <el-table-column label="喜欢" width="100" prop="loveCount"/>
            <el-table-column label="发布时间" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="130">
                <template slot-scope="scope">
                    <el-button type="primary" title="编辑" size="mini" icon="el-icon-edit" circle @click="handleEdit(scope.row,'update')"></el-button>
                    <el-button type="danger" title="删除" size="mini" icon="el-icon-delete" circle :loading="scope.row.delLoading" @click="handleDelete('delOne',[scope.row])"></el-button>
                </template>
            </el-table-column>

        </el-table>

        <page-footer
            slot="footer"
            :current="page.current"
            :loading="loading"
            :size="page.size"
            :total="page.total"
            @change="tableLoad({},false)"/>

    </template>

  </d2-container>
</template>

<script>
import {httpGet,httpPost} from '@/api/sys/http';
import PageFooter from '@/components/footer'

export default {
  title: 'article',
  index: 14,
  components:{
      PageFooter
  },
  data() {
    return {
        loading:false,
        delLoading:false,
        tableData: [],
        cascade:true,
        page: {
            current: 1,
            size: 0,
            total: 0
        },
    }
  },
  mounted() {
        this.$nextTick(() => {
            let self = this;
            self.tableLoad({},true);
        })
    },
  methods: {
      tableLoad(params,jumpFirst){
            var self = this;
            // if(jumpFirst) self.$refs.pagination.current = 1;
 
            params = {
                pageNumber: self.page.current,
                pageSize: self.page.size
            };
            self.loading = true;
            httpPost('/article/list', params).then(res => {
                self.loading = false;
                self.tableData = res.rows
                self.page.total = res.total;
            });
        },

    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    handleStatusChange(){

    }
  }
}
</script>
